<template>
  <div class="oo">
    <div style="margin-top: 15px;">

    </div>
    <el-input placeholder="请输入订单序列" v-model="inputText" maxlength="30" class="il" size="large" disabled>
      <template slot="prepend">订单序列</template>
      <el-button slot="append" icon="el-icon-search" @click="search" type="primary" plain></el-button>
    </el-input>
    <el-button class="io" icon="el-icon-upload" type="primary" @click="getData" round>获取订单数据</el-button>
    <el-button class="ii" icon="el-icon-s-order" type="primary" @click="curren" round>当前订单</el-button>
    <el-table
        :data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        :bottom="100"
        background-color="#24314F"
        style="width: 100%"
        max-height="600"
        top="30"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        @cell-click="tableCellClick"
        :cell-class-name="
      ({ row, column, rowIndex, columnIndex }) => (
        (row.index = rowIndex), (column.index = columnIndex)
      )
    ">
      <el-table-column
          fixed
          prop="ordersid"
          label="订单序列"
          width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.ordersid }}
        </template>
      </el-table-column>
      <el-table-column
          prop="customername"
          label="客户名称"
          width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tableCellClickRowIndex&&scope.column.index === tableCellClickColumnIndex ">
          
            
         
        
          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.customername"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus
          />
        </span>
          <span v-else>{{ scope.row.customername }}</span>
        </template>
      </el-table-column>

      <el-table-column
          prop="staffname"
          label="员工名称"

          width="100">
        <template slot-scope="scope">
            <span
                v-if="
            scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex        ">
          

          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.staffname"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus
          />
        </span>
          <span v-else>{{ scope.row.staffname }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="shopname"
          label="商品名称"
          width="150">
        <template slot-scope="scope">
           <span
               v-if="
            scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex">
          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.shopname"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus/>
        </span>
          <span v-else>{{ scope.row.shopname }}</span>
        </template>
      </el-table-column>

      <el-table-column
          prop="ordersquantity"
          label="订购数量"
          width="100">
        <template slot-scope="scope">
           <span
               v-if="scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex">
            
          
       
          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.ordersquantity"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus/>
        </span>
          <span v-else>{{ scope.row.ordersquantity }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="shopprice"
          label="商品价格"
          width="100">
        <template slot-scope="scope">
           <span
               v-if="scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex">
            
          
       
          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.shopprice"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus/>
        </span>
          <span v-else>{{ scope.row.shopprice }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="ordersprice"
          label="订单总价"
          width="100">
        <template slot-scope="scope">
           <span
               v-if="scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex">
            
          
       
          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.ordersprice"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus/>
        </span>
          <span v-else>{{ scope.row.ordersprice }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="createtime"
          label="创建日期"
          width="100">
        <template slot-scope="scope">
           <span
               v-if="scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex">
            
          
       
          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.createtime"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus/>
        </span>
          <span v-else>{{ scope.row.createtime }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="updatetime"
          label="更新日期"
          width="100">
        <template slot-scope="scope">
           <span
               v-if="scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex">
            
          
       
          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.updatetime"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus/>
        </span>
          <span v-else>{{ scope.row.updatetime }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="ordersstate"
          label="订单状态"
          width="100">
        <template slot-scope="scope">
           <span
               v-if="scope.row.index === tableCellClickRowIndex &&
            scope.column.index === tableCellClickColumnIndex">
            
          
       
          <el-input
              placeholder="请输入内容…"
              v-model="scope.row.ordersstate"
              @blur="tableCellInputBlur"
              size="mini"
              autofocus/>
        </span>
          <span v-else>{{ scope.row.ordersstate }}</span>
        </template>
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button
              size="small"
              @click="update(scope.$index, scope.row)" type="primary">编辑
          </el-button>
          <el-button type="danger" @click="delete1(scope.$index,scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span class="demonstration"></span>
    <el-pagination
        background
        class="oo1"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableCellClickRowIndex: null, // 点击的单元格行索引
      tableCellClickColumnIndex: null, // 点击的单元格列索引
      table: [],
      gonew: true,
      tab1: [],
      tableData: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
      input1: '',
      tableList: [],
      searchlist: [],
      inputText: "",
    }
  }, created() {
    this.setSlist(this.tableList);
  },
  methods: {
    setSlist(arr) {
      this.tableData = JSON.parse(JSON.stringify(arr))
      console.log(this.tableData)
    },
    search() {
      if (this.inputText) {
        var slist = [];
        // 过滤需要的数据
        this.tableList.forEach((item) => {
          console.log(item.ordersid)
          var sdd = JSON.stringify(item.ordersid)
          // 检测搜索关键字 和 判断是否删除的数据
          if (sdd === this.inputText && this.inputText != null) {
            slist.push(item);
            console.log(slist)

          } else if (!item.isDelete) {
            this.searchlist.push(item)
          }
        });
        this.setSlist(slist); // 将过滤后的数据给了tableList
      } else {
        // 没有搜索内容，则展示全部数据 但是要判断是否删除的数据
        this.searchlist = []
        this.tableList.forEach((item) => {
          if (!item.isDelete) {
            this.searchlist.push(item)
            this.setSlist(this.searchlist)
          }
        })
      }
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    async delete1(idx, row) {
      var r = window.confirm('您确定删除么？')

      if (r === true) {
        this.$axios({
          url: '/api/salesorder/Deletesalesorder',
          method: 'post',
          changeOrigin: true,
          transformRequest: [function () {
            var oMyForm = new FormData()
            oMyForm.append('ordersid', row.ordersid)
            return oMyForm
          }]
        }).then(res => {
          if (res.data === 1) {
            this.$message.success("删除成功")
          }
          console.log(res.data)
          this.getData()
        }).catch(err => {
          this.$message.error("删除失败")
          this.getData()
        })
      }

    },
    async update(idx, row) {
      var r = window.confirm('您确定更改么？')
      if (r === true) {
        this.$axios({
          url: '/api/salesorder/Updatesalesorder',
          method: 'post',
          changeOrigin: true,
          transformRequest: [function () {
            var oMyForm = new FormData()
            oMyForm.append('ordersid', row.ordersid)
            oMyForm.append('customername', row.customername)
            oMyForm.append('staffname', row.staffname)
            oMyForm.append('shopname', row.shopname)
            oMyForm.append('ordersquantity', row.ordersquantity)
            oMyForm.append('shopprice', row.shopprice)
            oMyForm.append('ordersprice', row.ordersprice)
            oMyForm.append('ordersstate', row.ordersstate)

            return oMyForm
          }]
        }).then(res => {
          if (res.data === 1) {
            this.$message.success("编辑成功")
          }
          console.log(res.data)
          this.getData()
        }).catch(err => {
          this.$message.error("编辑失败")
          this.getData()
        })
      }


    },
    curren() {
      this.tableData = this.table
      this.setSlist(this.tableData)
    },
    tableCellClick(row, column, cell, event) {
      this.tableCellClickRowIndex = row.index;
      this.tableCellClickColumnIndex = column.index;
    },
    // 单元格失去焦点
    tableCellInputBlur(row, event, column) {
      this.tableCellClickRowIndex = null;
      this.tableCellClickColumnIndex = null;
    },
    async getData() {
      // await this.$http.get()
      // 对allData进行赋值
      this.$axios({
        url: '/api/salesorder/ShowAllsalesorder',
        method: 'post',
        transformRequest: [function () {
          var oMyForm = new FormData()
          return oMyForm
        }]
      }).then(async result => {
        console.log(result.data)
        console.log(result.data.length)
        console.log(result.data[0].username)
        const allData = await result.data
        const tableData1 = new Array
        for (var i = 0; i < allData.length; i++) {
          tableData1[i] = {
            ordersid: await allData[i].ordersid,
            customername: await allData[i].customername,
            staffname: await allData[i].staffname,
            shopname: await allData[i].shopname,
            ordersquantity: await allData[i].ordersquantity,
            shopprice: await allData[i].shopprice,
            ordersprice: await allData[i].ordersprice,
            createtime: await allData[i].createtime,
            updatetime: await allData[i].updatetime,
            ordersstate: await allData[i].ordersstate


          }
        }
        console.log(tableData1)
        this.table = tableData1
        this.tableList = tableData1
        this.setSlist(this.tableList)
      })
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

  }
}
</script>
<style lang="less" scoped>
// 全屏样式的定义
.io {
  width: 15%;
  float: right;
  position: relative;
}

.ii {
  width: 15%;
  float: right;
  position: relative;
  right: 5%;
}

.il {
  position: relative;
  float: left;
  width: 30%;
}

.ill {
  width: 25%;
  float: left;

}

.ll {
  width: 5%;
  float: left;
}

.oo {
  border: 10px solid #1445b0;
  border-radius: 15px 15px 15px 15px;
  border-shadow: #091e4b;
  background-color: #fffffb;
  box-shadow: 0px 0px 10px #05f0f0;
}

.ll1 {
  width: 5%;
  float: left;
  left: 5%;
}

.ill1 {
  width: 25%;
  float: left;
  left: 5%;
}

.block1 {
  .demonstration {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  height: 20%;
  float: left;
  width: 30%;
  position: relative;
}

.block {
  float: right;
  width: 30%;
  right: 508px;
}
</style>
